<template lang="html">
  <section class="components-index_classify">
    <div class="classify-main">
      <i class="icon-basketball"></i>
      <i class="icon-basketball"></i>
      <ul class="main-content">
        <li class="content-area" :class="{ active: isShowOptions && isDistrict }" @click="showDistrict()">
          <span>{{districtTag}}</span><i class="ic-category-more"></i>
          <!-- <span>{{districtTag}}</span><i class="ic-category-more"></i> -->
        </li>
        <li class="content-category" :class="{ active: isShowOptions && !isDistrict }" @click="showCatogory()">
          <span>{{categoryTag}}</span><i class="ic-category-more"></i>
        </li>
      </ul>
    </div>

    <ul class="classify-category" v-show="isShowOptions" style="z-index: 990">
      <li v-for="(option, index) in currentOptions" @click="selectOption(option)">{{option.value}}</li>
    </ul>

    <div class="classify-category-outter" v-show="isShowOptions" @click="isShowOptions = false"></div>

  </section>
</template>

<script>
export default {
  props: {
    district:{
      type: Array,
      require: true
    },
    category:{
      type: Array,
      require: true
    }
  },
  data(){
    return {
      isShowOptions: false,
      isDistrict: null, //选项是则为区域选项，否则为分类选项
      currentOptions: null,
      // districtId: 0,
      // categoryId: 0,
    }
  },
  watch: {
    isDistrict(val){
      if(val && this.district){
        this.currentOptions = this.district
      } else if(!val && this.category) {
        this.currentOptions = this.category
      }
    }
  },
  computed: {
    districtId(){
      return this.$store.state.indexData.currentDistrictId
    },
    categoryId(){
      return this.$store.state.indexData.currentCategoryId
    },
    districtTag(){
      if(!!this.district && this.district.length > 0 ){
        let cur = this.district.filter(item => {
          return item.id == this.districtId
        })
        return cur[0].value
      }
      return 'district'
    },
    categoryTag(){
      if(!!this.category && this.category.length > 0){
        let cur = this.category.filter(item => {
          return item.id == this.categoryId
        })
        return cur[0].value
      }
      return 'category'
    }
  },
  methods: {
    showDistrict(){
      this.isShowOptions = !this.isShowOptions
      this.isDistrict = true
    },
    showCatogory(){
      this.isShowOptions = !this.isShowOptions
      this.isDistrict = false
    },
    selectOption(opt){
      console.info('select---', opt.value)
      if(this.isDistrict){
        this.$store.dispatch('setCurrentDistrictId', parseInt(opt.id, 10))
      } else {
        this.$store.dispatch('setCurrentCategoryId', parseInt(opt.id, 10))
      }
      this.isShowOptions = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../css/config";
$bg-color: rgba(51, 51, 51, 0.95);
$main-height: 60px;

.components-index_classify{
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 0 27px;
  color: #fff;
  .classify-main{
    position: relative;
    width: 100%;
    height: $main-height;
    border-radius: $main-height;
    background-color: $bg-color;
    .main-content{
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 0 45px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
      li{
        flex: 1 1 50%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        &.active{
          color: $common-red;
        }
        span{
          display: inline-block;
          font-size: 25px;
        }
        .ic-category-more{
          display: inline-block;
          font-size: 16px;
          transform: scale(0.5);
        }
      }
      li:nth-child(1){
        border-right: 1px solid #fff;
      }
    }
    .icon-basketball{
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      display: block;
      width: 30px;
      height: 30px;
      background: url(http://opmju0pmq.bkt.clouddn.com/zp-ball.png) no-repeat;
      background-size: cover;
    }
    .icon-basketball:nth-child(1){
      left: 15px;
    }
    .icon-basketball:nth-child(2){
      right: 15px;
    }
  }
  .classify-category{
    position: absolute;
    top: $main-height;
    left: 50%;
    transform: translate(-50%, 0);
    width: 645px;
    overflow: hidden;
    background-color: $bg-color;
    li{
      width: 100%;
      height: 65px;
      line-height: 65px;
      box-sizing: border-box;
      padding: 0 68px;
      @include text-overflow;
      font-size: 30px;
      &:active{
        color: $common-red;
      }
    }
  }
  .classify-category-outter{
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
  }
}
</style>
